<div class="container">
  <div class="row">
    <div class="col text-center">
      <div>
        <h1 class="font-weight-bold gf-text-wrap-balance intro" i18n>
          Manage your wealth like a boss
        </h1>
      </div>
      <p class="gf-text-wrap-balance lead mb-4" i18n>
        Ghostfolio is a privacy-first, open source dashboard for your personal
        finances. Break down your asset allocation, know your net worth and make
        solid, data-driven investment decisions.
      </p>
      <div class="mb-4">
        <a
          href="https://www.youtube.com/watch?v=yY6ObSQVJZk"
          target="_blank"
          title="Watch the Ghostfol.io Trailer on YouTube"
        >
          <img
            alt="Ghostfol.io Trailer"
            class="rounded video"
            src="../assets/images/video-preview.jpg"
            style="max-width: 100%; width: 40rem"
          />
        </a>
      </div>
    </div>
  </div>
</div>

<div class="container">
  <div class="button-container mb-5 row">
    <div class="align-items-center col d-flex justify-content-center">
      @if (hasPermissionToCreateUser) {
        <a
          color="primary"
          i18n
          mat-flat-button
          [routerLink]="routerLinkRegister"
          >Get Started</a
        >
      }
      @if (hasPermissionForDemo) {
        @if (hasPermissionToCreateUser) {
          <div class="mx-3 text-muted" i18n>or</div>
        }
        <a i18n mat-stroked-button [routerLink]="routerLinkDemo">Live Demo</a>
      }
    </div>
  </div>

  @if (hasPermissionForStatistics) {
    <div class="row mb-5">
      <div
        class="col-md-4 d-flex my-1"
        [ngClass]="{ 'justify-content-center': deviceType !== 'mobile' }"
      >
        <a
          class="d-block"
          title="Ghostfolio in Numbers: Monthly Active Users (MAU)"
          [routerLink]="routerLinkOpenStartup"
        >
          <gf-value
            i18n
            icon="people-outline"
            size="large"
            [value]="statistics?.activeUsers30d ?? '-'"
            >Monthly Active Users</gf-value
          >
        </a>
      </div>
      <div
        class="col-md-4 d-flex my-1"
        [ngClass]="{ 'justify-content-center': deviceType !== 'mobile' }"
      >
        <a
          class="d-block"
          title="Ghostfolio in Numbers: Stars on GitHub"
          [routerLink]="routerLinkOpenStartup"
        >
          <gf-value
            i18n
            icon="star-outline"
            size="large"
            [value]="statistics?.gitHubStargazers ?? '-'"
            >Stars on GitHub</gf-value
          >
        </a>
      </div>
      <div
        class="col-md-4 d-flex my-1"
        [ngClass]="{ 'justify-content-center': deviceType !== 'mobile' }"
      >
        <a
          class="d-block"
          title="Ghostfolio in Numbers: Pulls on Docker Hub"
          [routerLink]="routerLinkOpenStartup"
        >
          <gf-value
            i18n
            icon="cloud-download-outline"
            size="large"
            [value]="statistics?.dockerHubPulls ?? '-'"
            >Pulls on Docker Hub</gf-value
          >
        </a>
      </div>
    </div>
  }

  <div class="row mb-5">
    <div class="col-12 text-center text-muted">
      <small i18n>As seen in</small>
    </div>
    <div class="col-12">
      <gf-logo-carousel class="py-3" />
    </div>
  </div>

  <div class="pt-3 row">
    <div class="col text-center">
      <h2 class="gf-text-wrap-balance h4 mb-1 text-center" i18n>
        Protect your <strong>assets</strong>. Refine your
        <strong>personal investment strategy</strong>.
      </h2>
      <p class="gf-text-wrap-balance lead m-0" i18n>
        Ghostfolio empowers busy people to keep track of stocks, ETFs or
        cryptocurrencies without being tracked.
      </p>
    </div>
  </div>

  <div class="row my-3">
    <div class="col-md-4 my-2">
      <mat-card appearance="outlined">
        <mat-card-header>
          <mat-card-title i18n>360° View</mat-card-title>
        </mat-card-header>
        <mat-card-content i18n>
          Get the full picture of your personal finances across multiple
          platforms.
        </mat-card-content>
      </mat-card>
    </div>
    <div class="col-md-4 my-2">
      <mat-card appearance="outlined">
        <mat-card-header>
          <mat-card-title i18n>Web3 Ready</mat-card-title>
        </mat-card-header>
        <mat-card-content i18n>
          Use Ghostfolio anonymously and own your financial data.
        </mat-card-content>
      </mat-card>
    </div>
    <div class="col-md-4 my-2">
      <mat-card appearance="outlined">
        <mat-card-header>
          <mat-card-title i18n>Open Source</mat-card-title>
        </mat-card-header>
        <mat-card-content i18n>
          Benefit from continuous improvements through a strong community.
        </mat-card-content>
      </mat-card>
    </div>
  </div>

  <div class="row my-5">
    <div class="col-md-6 offset-md-3">
      <h2 class="h4 mb-1 text-center" i18n>Why <strong>Ghostfolio</strong>?</h2>
      <p class="gf-text-wrap-balance lead mb-3 text-center" i18n>
        Ghostfolio is for you if you are...
      </p>
      <ul class="list-unstyled">
        <li class="d-flex mb-3">
          <span class="mr-3">💼 </span
          ><span i18n
            >trading stocks, ETFs or cryptocurrencies on multiple
            platforms</span
          >
        </li>
        <li class="d-flex mb-3">
          <span class="mr-3">🏦</span
          ><span i18n>pursuing a buy & hold strategy</span>
        </li>
        <li class="d-flex mb-3">
          <span class="mr-3">🎯</span
          ><span i18n
            >interested in getting insights of your portfolio composition</span
          >
        </li>
        <li class="d-flex mb-3">
          <span class="mr-3">👻</span
          ><span i18n>valuing privacy and data ownership</span>
        </li>
        <li class="d-flex mb-3">
          <span class="mr-3">🧘</span><span i18n>into minimalism</span>
        </li>
        <li class="d-flex mb-3">
          <span class="mr-3">🧺</span
          ><span i18n>caring about diversifying your financial resources</span>
        </li>
        <li class="d-flex mb-3">
          <span class="mr-3">🆓</span
          ><span i18n>interested in financial independence</span>
        </li>
        <li class="d-flex mb-3">
          <span class="mr-3">🙅</span
          ><span i18n>saying no to spreadsheets in {{ currentYear }}</span>
        </li>
        <li class="d-flex mb-3">
          <span class="mr-3">😎</span><span i18n>still reading this list</span>
        </li>
      </ul>
      <div class="mt-4 text-center">
        <a i18n mat-stroked-button [routerLink]="routerLinkAbout"
          >Learn more about Ghostfolio</a
        >
      </div>
    </div>
  </div>

  <div class="row my-5">
    <div class="col-12">
      <h2 class="h4 mb-3 text-center" i18n>
        What our <strong>users</strong> are saying
      </h2>
    </div>
    <div class="col-md-8 offset-md-2">
      <gf-carousel [aria-label]="'Testimonials'">
        @for (testimonial of testimonials; track testimonial) {
          <div #carouselItem gfCarouselItem>
            <div class="d-flex px-4">
              <gf-logo
                class="mr-3 mt-2 pt-1"
                size="medium"
                [showLabel]="false"
              />
              <div>
                <div>{{ testimonial.quote }}</div>
                <div class="mt-2 text-muted">
                  —
                  @if (testimonial.url) {
                    <a target="_blank" [href]="testimonial.url">{{
                      testimonial.author
                    }}</a>
                  } @else {
                    <span>{{ testimonial.author }}</span>
                  }
                  ,
                  {{ testimonial.country }}
                </div>
              </div>
            </div>
          </div>
        }
      </gf-carousel>
    </div>
  </div>

  @if (hasPermissionForSubscription) {
    <div class="row my-5">
      <div class="col-12">
        <h2 class="gf-text-wrap-balance h4 text-center" i18n>
          Members from around the globe are using
          <a href="pricing"><strong>Ghostfolio Premium</strong></a>
        </h2>
      </div>
      <div class="col-md-8 customer-map-container offset-md-2">
        <gf-world-map-chart
          format="👻"
          [countries]="countriesOfSubscribersMap"
        />
      </div>
    </div>
  }

  @if (hasPermissionForSubscription) {
    <div class="row my-3">
      <div class="col-12">
        <h2 class="h4 mb-1 text-center" i18n>
          How does <strong>Ghostfolio</strong> work?
        </h2>
        <p class="lead mb-3 text-center" i18n>Get started in only 3 steps</p>
      </div>
      <div class="col-md-4 my-2">
        <mat-card appearance="outlined" class="h-100">
          <mat-card-content class="d-flex flex-row">
            <div class="flex-grow-1">
              <div class="font-weight-bold" i18n>Sign up anonymously*</div>
              <div class="text-muted" i18n>
                <small>* no e-mail address nor credit card required</small>
              </div>
            </div>
            <div class="pl-2 text-muted text-right">1</div>
          </mat-card-content>
        </mat-card>
      </div>
      <div class="col-md-4 my-2">
        <mat-card appearance="outlined" class="h-100">
          <mat-card-content class="d-flex flex-row">
            <div class="flex-grow-1">
              <div class="font-weight-bold" i18n>
                Add any of your historical transactions
              </div>
            </div>
            <div class="pl-2 text-muted text-right">2</div>
          </mat-card-content>
        </mat-card>
      </div>
      <div class="col-md-4 my-2">
        <mat-card appearance="outlined" class="h-100">
          <mat-card-content class="d-flex flex-row">
            <div class="flex-grow-1">
              <div class="font-weight-bold" i18n>
                Get valuable insights of your portfolio composition
              </div>
            </div>
            <div class="pl-2 text-muted text-right">3</div>
          </mat-card-content>
        </mat-card>
      </div>
    </div>
  }

  @if (hasPermissionToCreateUser) {
    <div class="row my-5">
      <div class="col">
        <h2 class="h4 mb-1 text-center" i18n>
          Are <strong>you</strong> ready?
        </h2>
        <p class="gf-text-wrap-balance lead mb-3 text-center" i18n>
          Join now
          @if (hasPermissionForDemo) {
            or check out the example account
          }
        </p>
        <div class="align-items-center d-flex justify-content-center py-2">
          <a
            color="primary"
            i18n
            mat-flat-button
            [routerLink]="routerLinkRegister"
            >Get Started</a
          >
          @if (hasPermissionForDemo) {
            <div class="mx-3 text-muted" i18n>or</div>
            <a i18n mat-stroked-button [routerLink]="routerLinkDemo"
              >Live Demo</a
            >
          }
        </div>
      </div>
    </div>
  }
</div>

<div class="container">
  <div class="d-block row">
    <div class="outro-inner-container mx-auto">
      <div class="h-100 w-100"></div>
    </div>
  </div>
  <div class="row mb-4">
    <div
      class="align-items-center d-flex flex-column justify-content-center w-100"
    >
      <gf-logo size="medium" />
      <div>Wealth Management Software</div>
    </div>
  </div>
  <div class="row">
    <div class="align-items-center d-flex flex-column w-100">
      <a
        class="logo logo-agplv3 mask"
        href="https://www.gnu.org/licenses/agpl-3.0.html"
        target="_blank"
        title="GNU Affero General Public License Version 3"
      ></a>
    </div>
  </div>
</div>
